<!--
 * @Author: zjj
 * @Date: 2019-12-31 10:45:32
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-03 13:31:28
 -->
<template>
    <div class="wrapper flex justify-center aligin-center flex-column">
        <div class="content">
            <div class="title">
                您上次登录位置是
            </div>
            <div class="flex justify-center">
                <div class="address">{{address}}</div>
            </div>
            <div class="tip">是否切换？</div>
            <div class="option-wrap flex">
                <span class="option flex justify-center aligin-center mr-1" @click="confirm">切换上次位置</span>
                <span class="option flex justify-center aligin-center" @click="close">改为当前位置</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang='less' scoped>
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  .content {
    position: relative;
    padding-top: 20px;
    z-index: 998;
    width: 255px;
    background:rgba(255,255,255,1);
    border-radius:10px;
    animation: show 0.3s 1;
    @keyframes show {
      0% {
        opacity: 0;
        transform: scale(1.5);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
  }
  .title{
      font-size:18px;
      font-weight:600;
      text-align: center;
  }
  .address{
      margin-top: 37px;
      padding: 7px 14px;
      background:rgba(181,181,181,0.2);
      border-radius:5px;
      font-size: 16px;
      color: #EA373F;
  }
  .tip{
      margin-top: 26px;
      text-align: center;
      font-size: 16px;
      color: #999999;
  }
  .option-wrap{
      margin-top: 50px;
      height: 50px;
  }
  .option{
      font-size: 18px;
      color: #fff;
      flex: 1;
      height: 100%;
      background: #EA373F;
  }
  .mr-1{
      margin-right: 1px;
  }
}
</style>
